<template>
  <m-layout>
    <mt-header slot="header" title="课时选择" >
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section :border-bottom="false">
        <div class="lesson" v-if="lessonArr.length"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10"
          :infinite-scroll-immediate-check="true"
        >
           <mt-cell :title="item.courseName"
           :label="`${item.subjectName}  销课${item.signNum}/应到${item.signAll}`"
           is-link v-for="(item,index) in lessonArr"
           :key="index"
           :to="`/named/leave?classScheduleId=${item.classScheduleId}&teacherId=${teacherId}&properties=${properties}&courseName=${item.courseName}`"
           class="item"></mt-cell>
        </div>
        <e-placeholder text="暂无课程" v-else/>
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import api from 'api/named'
export default {
  data () {
    return {
      classId: '',
      teacherId: '',
      properties: '',
      lessonArr: [],
      total: '',
      rows: 15,
      page: 1,
      loading: false,
      beginTime: '',
      endTime: ''
    }
  },
  methods: {
    // 下拉刷新
    loadMore () {
      if (this.lessonArr.length >= this.total) {
        this.loading = true
        return false
      }
      this.lessonList()
    },
    // 查询课时
    lessonList () {
      api.lessonList({
        classId: this.classId,
        teacherId: this.teacherId,
        beginTime: this.beginTime,
        endTime: this.endTime,
        page: this.page,
        rows: this.rows
      }).then((res) => {
        this.total = res.data.total
        this.lessonArr.push(...res.data.list)
        this.page += 1
      }).catch(() => {})
    },
    goNext (item) {
      this.$router.push({path: '/named/leave', query: {teacherId: this.teacherId, classScheduleId: item.classScheduleId, courseName: item.courseName}})
    }
  },
  mounted () {
    let arg = this.$route.query
    this.beginTime = arg.beginTime
    this.endTime = arg.endTime
    this.classId = arg.classId
    this.teacherId = arg.teacherId
    this.properties = arg.properties
    this.lessonList()
  }
}
</script>

<style lang="scss" scoped>
  .lesson{
      margin-top: 0.2rem;
      padding: 0 0.2rem;
      .item{
        margin-bottom: 0.1rem;
        position: relative;
        padding-bottom: 0.1rem;
      }
    }
</style>
